<template>
	<view class="cart">
		<!-- 导航栏 -->
		<nav-bar isBack title="清单"></nav-bar>
		
		<!-- 顶部操作栏 -->
		<view class="c_top">
			<!-- minusCartAll -->
			<view class="c_tBtn" @tap="minusCarts">{{flag?"完成":"管理"}}</view>
			<view class="c_tTxt">共{{totalLength}}件家具</view>
		</view>
		
		<!-- 购物车 -->
		<view class="c_cart">
			<view class="c_cGroup" v-for="items in cart">
				<view class="c_cShop">
					<view class="c_cSelect" :class="{'active': items.select}" @tap="selectShop(items.store_id)">
						<view class="c_csIcon"><image src="/static/mall/selected.png"></image></view>
					</view>
					<view class="c_csInto" @tap="tostroe(items.store_id )">进店</view>
					<view class="c_csLogo"><image :src=" items.store_logo"></image></view>
					<view class="c_csName">{{items.store_name}}</view>
				</view>
				<view class="c_cList">
					<view class="c_cItem" v-for="item in items.medical_list">
						<view class="c_cSelect" :class="{'active': item.select}" @tap="selectGoods(items.store_id, item.id)">
							<view class="c_csIcon"><image src="/static/mall/selected.png"></image></view>
						</view>
						<view class="c_cImage" @click="toProduct(item.product_id)"><image :src="item.main_imgurl"></image></view>
						<view class="c_cCont">
							<view class="c_cName omit-1" @click="toProduct(item.product_id)">{{item.product_title}}</view>
							<view class="c_cSize omit-1">
								<view class="c_csIcon"><text class="iconfont icon-more"></text></view>
								<text v-for="(item2,index) in item.attribute">{{item2.value}}</text>
							</view>
							<view class="c_cPrice">￥<text>{{item.price}}</text></view>
							<view class="yprice" v-if="item.rate_price"><i>底价</i>￥<text>{{item.rate_price}}</text></view>
							<view class="c_ccart_nums">
								<view class="c_cnMinus" @tap="minusCart(items.store_id, item)"></view>
								<view class="c_cncart_num">{{item.cart_num}}</view>
								<view class="c_cnAdd" @tap="addCart(items.store_id, item)"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提交订单栏 -->
		<submit-bar class="c_submit">
			<view class="c_sLeft" slot="left">
				<view class="c_sSelect" :class="{'active': isAllSelect}" @tap="selectAll">
					<view class="c_ssFalse"><image src="/static/mall/Not_all.png"></image></view>
					<view class="c_ssTrue"><image src="/static/mall/selected.png"></image></view>
				</view>
				<view class="c_cTxt1">全选</view>
				<view class="c_cTxt2"></view>
				<view class="c_cTxt3">￥<text>{{sumPrice}}</text></view>
				<view class="yprice" style="margin-top: 0; margin-left: 20rpx;" v-if="sumCostPrice"><i>底价</i>￥<text>{{sumCostPrice}}</text></view>
				<!-- <view class="c_cTxt4">￥<text>{{sumCostPrice}}</text></view> -->
			</view>
			<view class="c_sRight" slot="right" v-if="!flag">去结算</view>
			<view class="c_sRight" slot="right" v-if="flag" @click="minusCartAll">删除</view>
		</submit-bar>
	</view>
</template>

<script>
import URL from '@/config/url.js'
import navBar from '@/components/navBar/navBar.vue'
import submitBar from '@/components/submitBar/submitBar.vue'
import service_mall from '@/service/mall.js'

export default {
	components: { navBar, submitBar },
	
	data() {
		return {
			ImageUrl: URL.IMAGE,
			cart: null,
			isAllSelect: false,   // 是否全选中
			sumPrice: 0,
			sumCostPrice: 0,
			flag:false
		}
	},
	onLoad() {
		this.getCartList()
	},
	computed:{
		totalLength(){
			if(this.cart && this.cart.length>0){
				let total = 0;
				this.cart.map(item1=>{
					if(item1.medical_list && item1.medical_list.length>0){
						total+=item1.medical_list.length
					}
				})
				return total
			}else{
				return 0
			}
		}
	},
	methods: {
		minusCarts(){
			this.flag = !this.flag
		},
		toProduct(e){
			uni.navigateTo({ url:`/pages/mall/goods/goods?id=${e}` })
		},
		tostroe(e){
			uni.navigateTo({ url: "/pages/mall/store/store?storeId=" + e })
		},
		//获取购物车列表
		getCartList(){
			service_mall.goods_getlist({})
				.then(res => {
					if (res.code == 1) {
					  this.cart = res.data.list
					  this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
					  this.countPrice()       // 计算价格
					}
			})
		},
		// 选择店铺
		selectShop(store_id) {
			let cart = this.cart
			let shop = cart.find(val => val.store_id == store_id)
			// 全选or全不选
			shop.select = !shop.select
			shop.medical_list.forEach(val=> val.select = shop.select)
			
			this.verifyAllSelect()  // 验证是否所有店铺所有商品是否都已选中
			this.countPrice()       // 计算价格
		},
		
		// 选择商品
		selectGoods(store_id, id) {
			let cart = this.cart
			let shop = cart.find(val => val.store_id == store_id)
			let goods = shop.medical_list.find(val => val.id == id)
			
			// 选中or不选中
			goods.select = !goods.select
			// 判断该店铺下商品是否已全选
			let flag = true
			shop.medical_list.forEach(val => { if (!val.select) flag = false })
			if (shop.select != flag) shop.select = flag
			
			this.verifyAllSelect()  // 验证是否所有店铺所有商品是否都已选中
			this.countPrice()       // 计算价格
		},
		
		// 全选or全不选
		selectAll() {
			this.isAllSelect = !this.isAllSelect
			this.cart.forEach(val => {
				val.select = this.isAllSelect
				val.medical_list.forEach(v => v.select = this.isAllSelect)
			})
			this.verifyAllSelect()  // 验证是否所有店铺所有商品是否都已选中
			this.countPrice()       // 计算价格
		},
		
		// 验证所有商品是否全选
		verifyAllSelect() {
			let isAll = this.cart.find(val => !val.select) ? false : true
			if (this.isAllSelect != isAll) this.isAllSelect = isAll 
		},
		
		// 计算价格
		countPrice() {
			let price = 0, costPrice = 0
			this.cart.forEach(val => {
				val.medical_list.forEach(v => {
					if (v.select) {
						price = this.$utils.accAdd(price, this.$utils.accMul(v.cart_num, v.price))
						costPrice = this.$utils.accAdd(costPrice, this.$utils.accMul(v.cart_num, v.rate_price))
					}
				})
			})
			
			this.sumPrice = price
			this.sumCostPrice = costPrice
		},
		
		// 添加商品
		addCart(store_id, item) {
			let cart = this.cart
			let shop = cart.find(val => val.store_id == store_id)
			let goods = shop.medical_list.find(val => val.id == item.id)
			goods.cart_num++
			this.countPrice()       // 计算价格
			service_mall.goods_numSave({
				id:item.id,
				num:goods.cart_num
			})
		},
		
		// 删减商品
		minusCart(store_id, item) {
			let cart = this.cart
			let shop = cart.find(val => val.store_id == store_id)
			let goods = shop.medical_list.find(val => val.product_id == item.product_id)
			if (goods.cart_num > 1) {
				goods.cart_num--
				this.countPrice()       // 计算价格
				service_mall.goods_numSave({
					id:item.id,
					num:goods.cart_num
				})
			}else{
				uni.showModal({
				    title: '提示',
				    content: '确认删除该项?',
				    success:  (res) => {
				        if (res.confirm) {
							service_mall.goods_del({
								id:item.id,
							}).then(res=>{
								if(res.code==1){
									this.getCartList()
								}
							})
				        } else if (res.cancel) {
							
				        }
				    }
				});
			}
		},
		// 删减多选商品
		minusCartAll() {
			let ids = [];
			this.cart.map(item1=>{
				if(item1.medical_list && item1.medical_list.length>0){
					item1.medical_list.map(item2=>{
						if(item2.select){
							ids.push(item2.id)
						}
					})
				}
			})
			if(ids.length<1){
				return
			}
			uni.showModal({
			    title: '提示',
			    content: '确认删除所选项?',
			    success:  (res) => {
			        if (res.confirm) {
						service_mall.goods_del({
							id:ids.join(","),
						}).then(res=>{
							if(res.code==1){
								this.getCartList()
							}
						})
			        } else if (res.cancel) {
						
			        }
			    }
			});
		},
		// 跳转页面
		toPage(page, { store_id } = {}) {
			if (page === 'store') uni.navigateTo({ url: "/pages/mall/store/store?store_id=" + store_id })
		},
	}
}
</script>

<style lang="scss" scoped>
.cart {
	// 顶部操作栏
	.c_top {height: 80rpx;line-height: 80rpx;font-size: 24rpx;padding-left: 36rpx;background: #fff;
		.c_tTxt {color: #787878;}
		.c_tBtn {height: 100%;padding: 0 32rpx;float: right;}
	}
	
	// 购物车
	.c_cart {padding-bottom: 136rpx;overflow: hidden;
		.c_cGroup {margin-top: 16rpx;background: #fff;}
		.c_cShop {height: 100rpx;padding-left: 112rpx;position: relative;display: flex;align-items: center;
			&::after {content: "";width: 100%;height: 1px;background: rgba(0, 0, 0, .08);position: absolute;bottom: 0;left: 0;transform: scaleY(.5);}
			.c_csInto {width: 122rpx;height: 44rpx;line-height: 44rpx;text-align: center;color: #cbaf87;font-size: 22rpx;margin-top: -22rpx;border: 1px solid #e7dec8;border-radius: 22rpx;position: absolute;top: 50%;right: 32rpx;}
			.c_csLogo {width: 50rpx;height: 50rpx;margin-right: 16rpx;border-radius: 50%;background: #f6f7fb;overflow: hidden;}
		}		
		.c_cItem {min-height: 252rpx;padding: 24rpx 24rpx 24rpx 112rpx;position: relative;
			&::after {content: "";width: 100%;height: 1px;background: rgba(0, 0, 0, .08);position: absolute;bottom: 0;left: 38rpx;right: 0;transform: scaleY(.5);}
			&:last-child::after {content: none;}
			.c_cImage {width: 150rpx;height: 150rpx;margin-right: 16rpx;border-radius: 4rpx;background: #f6f7fb;float: left;}
			.c_cCont {overflow: hidden;}
			.c_cName {height: 40rpx;line-height: 40rpx;color: #1a1c20;}
			.c_cSize {max-width: 100%;height: 44rpx;line-height: 44rpx;color: #939393;font-size: 24rpx;padding: 0 38rpx 0 14rpx;margin-top: 12rpx;border-radius: 4rpx;background: #f9f6f3;position: relative;display: inline-block;
				.c_csIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;text-align: center;font-size: 22rpx;margin-top: -19.5rpx;position: absolute;top: 50%;right: 8rpx;transform: rotate(90deg);}
			}
			.c_cPrice {height: 44rpx;line-height: 44rpx;color: #ef5854;font-size: 20rpx;font-weight: bold;margin-top: 12rpx;
				& > text {font-size: 32rpx;}
			}
			.c_ccart_nums {height: 48rpx;position: absolute;bottom: 24rpx;right: 6rpx;display: flex;}
			.c_cncart_num {width: 72rpx;height: 48rpx;line-height: 48rpx;text-align: center;border-radius: 8rpx;background: #f6f7fb;}
			.c_cnMinus, .c_cnAdd {width: 72rpx;height: 48rpx;position: relative;}
			.c_cnMinus::before, .c_cnAdd::before, .c_cnAdd::after {content: "";width: 24rpx;height: 4rpx;border-radius: 4rpx;background: #333;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
			.c_cnAdd::after {width: 4rpx;height: 24rpx;}
		}
		.c_cSelect {width: 108rpx;height: 100%;position: absolute;top: 0;left: 0;display: flex;justify-content: center;align-items: center;
			&.active .c_csIcon {border: none;background: #cbaf87;
				& > image {display: block;}
			}
			.c_csIcon {width: 36rpx;height: 36rpx;border: 1px solid rgba(0, 0, 0, .2);border-radius: 50%;
				& > image {display: none;}
			}
		}
	}
.c_csName{
	text-overflow: ellipsis;
	    white-space: nowrap;
	    overflow: hidden;
	    width: 65%;
}	
	// 提交订单栏
	.c_submit {
		.c_sLeft {width: 100%;height: 100%;color: #fff;font-size: 26rpx;display: flex;align-items: center;
			.c_sSelect {width: 36rpx;height: 36rpx;margin: 0 12rpx 0 18rpx;
				&.active .c_ssTrue, .c_ssFalse {display: block;}
				&.active .c_ssFalse, .c_ssTrue {display: none;}
				.c_ssFalse, .c_ssTrue {width: 100%;height: 100%;}
			}
			.c_cTxt1 {padding-right: 24rpx;}
			.c_cTxt3 {font-size: 20rpx;padding-left: 4rpx;
				& > text {font-size: 28rpx;}
			}
			.c_cTxt4 {color: #939393;font-size: 16rpx;padding-left: 4rpx;
				& > text {text-decoration: line-through;font-size: 20rpx;}
			}
		}
	}
	
}
.yprice{
		    border: 1px #E9423E solid;
		    display: inline-block;
		    font-size: 16rpx;
		    line-height: 30rpx;
		    padding-right: 10rpx;
			    color: #e9423e;
				margin-top: 10rpx;
				border-radius: 3rpx;
		i{
			    display: inline-block;
			    background: #E9423E;
			    color: #fff;
			    font-weight: normal;
			    font-size: 16rpx;
				line-height: 34rpx;
				float: left;
			    padding: 0 10rpx;
			    margin-right: 5rpx;
		}
		text{
			    font-size: 22rpx;
		}
	}
</style>